//  头部 收购商城 登录 注册 企业官网 订单...悬浮变色效果
$("a").hover(function(){
    $(this).addClass("selected");
},function(){
    $(this).removeClass("selected");
});

 //头部地址导航显示和隐藏
$("header .top .address").hover(function() {
     $(this).find("span").css("background", "none");
    $(this).find(".areamini").css("background-color", "#fff");
    $(this).find("ul").show();
}, function() {
    // $(this).find("span").css("background", "url(../images/addr-select-down.png)");
    $(this).find(".areamini").css("background-color", "#f1f1f1");
    $(this).find("ul").hide();
});
//头部地址导航切换
$("header .top .address ul li a").click(function() {
    $(this).addClass("selected").parent().siblings().children().removeClass("selected");
    var selectedAddr = $(this).text();
    $("header .top .address span").text(selectedAddr);
});

//头部轮播图
$(".swiper-container").banner({
    imgs:$(".swiper-container").find("img"),     //必传
    autoPlay:true,     //是否要自动播放，可选，默认要
    list:false,         //是否要小圆圈，可选
    delayTime:3000,     //可选的，图片播放间隔时间
    moveTime:200,       //可选的，图片移动的时间
});

// 表单输入功能
$("#topKeywords").on("focus", function(){
    $("#topKeywords").get(0).value = "";
});
// 表单搜索功能
$("#topsearch").on("click", function(){
    var keyword = $("#topKeywords").val();
    if(keyword==""){
		alert("关键字不能为空！");
		return false;
	}else if(keyword.length < 2){
		alert("关键字太短了！");
        return false;
	}else if(keyword.length > 50){
        alert("关键字太长了！");
        return false;
	
	}
});
// 导航条悬浮功能
$("nav ul li").hover(function(){
    $(this).addClass("cur").siblings().removeClass("cur").parent().find("li").first().addClass("cur");
    // $(this).find(".areamini").css("background-color", "#fff");
    // $(this).find("ul").show();
},function(){
    $(this).removeClass("cur").parent().find("li").first().addClass("cur");
});

// 广告图轮播
$(".banner .banner-c").banner({
    imgs:$(".banner .banner-c").find("img"),     //必传
    autoPlay:true,
    left:$(".banner .banner-c").find("#left"),   //左按钮，可选
    right:$(".banner .banner-c").find("#right"), //右按钮，可选     //是否要自动播放，可选，默认要
    list:true,         //是否要小圆圈，可选
    delayTime:2000,     //可选的，图片播放间隔时间
    moveTime:200,       //可选的，图片移动的时间
});

// 主体边框变色效果
$("main .list li img").hover(function(){
    $(this).css("border", "1px solid #ed1d1d");
},function(){
    $(this).css("border", "1px solid #eae9e9");
})

// 热卖图书和新品图书渲染页面
class Render{
    constructor(options){
        this.dom1 = options.dom1;
        this.dom2 = options.dom2;
        this.dom3 = options.dom3;
        this.url = options.url;
        this.train = document.querySelector(".newBook .new .list .bookList ul"),
        this.leftBtn = document.querySelector(" .newBook .new .list .left");
        this.rightBtn = document.querySelector(" .newBook .new .list .right");
        // 2.开启请求
        this.load();
    }
    load(){
        var that = this;
        ajaxGet(this.url,function(res){
            that.res = JSON.parse(res);
            // 3.渲染页面
            that.displayHot();
            that.displayNewBook();
            that.displayPromo();
        })
    }
    // 热卖图书渲染页面
    displayHot(){
        var str = "";
        var num = parseInt(Math.random() * (this.res.length-10));
        for(let i = num;i < num + 10;i++){
                str += `
                    <li>
                        <a target="_blank" href="#" title="${this.res[i].bookName}">
                            <img src="${this.res[i].img}" alt="${this.res[i].bookName}" title="${this.res[i].bookName}">
                        </a>
                        <p><a target="_blank" href="#">${this.res[i].bookName}</a></p>
                        <del>原价：￥${this.res[i].original}</del>
                        <span><font>￥${this.res[i].present}</font></span>	
                    </li>
                  `
        }
        this.dom1.innerHTML = str;
        this.hotBorder();
    }
    // 热卖图书变框效果
    hotBorder(){
        $("main .list li img").hover(function(){
            $(this).css("border", "1px solid #ed1d1d");
        },function(){
            $(this).css("border", "1px solid #eae9e9");
        })
    }
    // 新品图书渲染页面
    displayNewBook(){
        var str = "";
        var num = parseInt(Math.random() * (this.res.length-8));
        for(let j= num;j < num + 8;j++){
                str += `
                        <li>
                            <a target="_blank" href="/#" title="${this.res[j].bookName}">
                                <img src="${this.res[j].img}" alt="" title="${this.res[j].bookName}">
                            </a>
                            <p><a target="_blank"href="/#">${this.res[j].bookName}</a></p>
                            <del>原价：￥${this.res[j].original}</del>
                            <span><font>￥${this.res[j].present}</font></span>				   
                        </li>
                  `
            }
        this.dom2.innerHTML = str + str;
        this.lunbo();
    }
    // 每周推荐渲染页面
    displayPromo(){
        var str = "";
        var num = parseInt(Math.random() * (this.res.length-5));
        for(let j= num;j < num + 5;j++){
                str += `
                        <li>
                            <a target="_blank" href="/#" title="${this.res[j].bookName}">
                                <img src="${this.res[j].img}" alt="" title="${this.res[j].bookName}">
                            </a>
                            <p><a target="_blank" href="/#">${this.res[j].bookName}</a></p>
                            <del>原价：￥${this.res[j].original}</del>
                            <span><font>￥${this.res[j].present}</font></span>				           
					    </li>
                  `
        }
        this.dom3.innerHTML = str;
    }
    lunbo(){
        this.imgList=document.querySelectorAll(".newBook .new .list .bookList ul li");
        this.width = this.imgList[0].clientWidth;
        this.idx = 0;
        this.right();
        this.left();
    }
    right(){
        var that = this;
        this.rightBtn.onclick = function(){
            that.idx++;
            animate(that.train,{left:-that.idx * that.width}, 1000, function(){
               if(that.idx >= that.imgList.length){
                    that.idx = 0;
                   that.train.style.left = 0;
               } 

            })

        }
    }
    left(){
        var that = this;
        this.leftBtn.onclick = function() {
            // 信号量改变
            that.idx--;
            // 判定信号量是否小于0 如果小于0 就瞬间切换到最后一张"猫腻"图
            if (that.idx < 0) {
                that.idx = that.imgList.length - 4;
                that.train.style.left = -that.idx * that.width + "px";
                that.idx--; 
            }
            animate(that.train, {left: -that.idx * that.width}, 1000)
        }
    }
}
new Render({
    dom1:document.querySelector(".hot .list ul"),
    dom2:document.querySelector(".newBook .list .bookList ul"),
    dom3:document.querySelector(".promo .list ul"),
    url:"http://localhost/lixinyu/json/hot.json",
    
})


// $(".column .leftColumn .sidebarNav ul li a").hover(function(){
// 	var index = $(this).parent().index();
// 	$(this).parent().addClass("cur").siblings().removeClass("cur");
// 	$(this).parents(".sidebarNav").siblings(".list").children("ul").stop(true).eq(index).fadeIn().siblings().hide();
// },function(){})

// // tab切换效果
// class Tab{
//     constructor(options){
//         this.dom1 = options.dom1;
//         console.log(this.dom1);
//         this.dom2 = options.dom2;
//         this.url = options.url;
//         this.load();
//     }
//     load(){
//         var that = this;
//         ajaxGet(this.url,function(res){
//             that.res = JSON.parse(res);
//             // 3.渲染页面
//             for(let j = 0; j < that.dom1.length; j++){
//                 that.display();
//                 that.dom1[j].onmouseover = function(){
//                     that.display();
//                 }
//             }
//         })  
//     }
//     display(){
//         var that = this;
//         var str = "";
//         var m = 1;
//         for(let i = 0; i < that.res.length; i++){
//                 if(that.dom1[j].getAttribute("id") == that.res[i].id){
//                     console.log(that.res[i]);
//                 str += `
//                         <li>
//                             <i class="top">${m}</i>
//                             <a href="#" target="_blank">${that.res[i].name}</a>
//                         </li>
//                 `
//                 m++;
//             }
//         }
//         that.dom2.innerHTML = str;
//         // tab栏变色显示和隐藏效果
//         $(".column .ranking .rankingNav ul li a").hover(function(){
//             var index = $(this).parent().index();
//             $(this).parent().addClass("cur").siblings().removeClass("cur");
//             $(this).parents(".rankingNav").siblings(".list").children("ul").stop(true).eq(index).fadeIn().siblings().hide();
//         },function(){});
//                 console.log(that.dom2);
//             }
//         }
// new Tab({
//     dom1:document.querySelectorAll(".column .ranking .rankingNav ul li a"),
//     dom2:document.querySelector(".column .ranking .list ul"),
//     url:"http://localhost/lixinyu/json/tab.json"
// })




